<template>
  <div class="shopcar">
    <div style="font-family: Arial;margin-left: 600px; padding-top:30px; font-size:large;padding-bottom: 18px">
      您的购物袋
    </div>
    <span v-if="sumadd()>1000&&sumadd()<5000">
      <div style="width: 100%;margin-top: 10px;margin-bottom: 30px;text-align: center">
        <i class="el-icon-check" style="color:#18753d;font-size:20px"></i>&nbsp
        <span style="color:#18753d;">您的购物金额超过 1000.00 ¥ 获得 {{(discountList[0].discount1).toFixed(2)}} ¥ 的折扣</span>
      </div>
    </span>
    <span v-else-if="sumadd()>5000&&sumadd()<10000">
      <div style="width: 100%;margin-top: 10px;margin-bottom: 30px;text-align: center">
        <i class="el-icon-check" style="color:#18753d;font-size:20px"></i>&nbsp
        <span style="color:#18753d;">您的购物金额超过 5000.00 ¥ 获得 {{(discountList[0].discount2).toFixed(2)}} ¥ 的折扣</span>
      </div>
    </span>
    <span v-else-if="sumadd()>10000">
      <div style="width: 100%;margin-top: 10px;margin-bottom: 30px;text-align: center">
        <i class="el-icon-check" style="color:#18753d;font-size:20px"></i>&nbsp
        <span style="color:#18753d;">您的购物金额超过 10000.00 ¥ 获得 {{(discountList[0].discount3).toFixed(2)}} ¥ 的折扣</span>
      </div>
    </span>
    <div class="shopall">
      <div style="overflow: auto;width:630px;height: 800px;float: left">
        <div class="pro-check">
          <el-checkbox v-model="isAllCheck" @change="selectedAll">全选</el-checkbox>
        </div>
        <div style="width:620px;height: 250px;float:left" v-for="car in shopcarList">
          <div class="pro-check">
            <el-checkbox v-model="car.select" @change="itemCheck(car)"></el-checkbox>
          </div>
          <div style="width:620px;height:200px">
            <div style="width: 200px;height: 200px;float: left">
              <img :src="car.img_url" width="200" height="200">
          </div>
            <div style="width: 410px;height: 200px;float: left">
              <div style="width:370px;height:40px;margin-top: 5px;margin-left:20px;font-size: 14px">
                <div style="float: left;width:310px;">
                  {{car.goods_name}}
                </div>
                <div style="float: left;width:50px">
                  {{(car.goods_pice*car.select_number).toFixed(2)}}&nbsp¥&nbsp
                </div>
              </div>
              <div style="width:370px;height:20px;margin-top: 15px;margin-left:20px;font-size: 14px">
                产品单价：{{car.goods_pice}}&nbsp¥
                <br/>
                产品库存：{{car.goods_number}}
              </div>
              <br/>
              <div style="width:370px;height:50px;margin-top: 15px;margin-left:20px">
                <el-input-number @change="shopChange(car)" v-model="car.select_number"  :min="1" :max="car.goods_number" label="描述文字"></el-input-number>
                <i @click="deteleList(car.id)" class="el-icon-delete" style="float: right;font-size: 25px;margin-top: 10px;margin-right: 5px"></i>
              </div>
            </div>
          </div>
          <div style="margin-top: 20px">
            <hr/>
          </div>
        </div>
        <div style="width:620px;height:80px;float:left;text-align: center;margin-top: 20px">
          <img src="https://www.swarovski.com.cn/medias/giftbag-greetingcard.jpg?context=bWFzdGVyfGltYWdlc3w1Mzg3fGltYWdlL2pwZWd8aW1hZ2VzL2g3ZC9oNGUvOTMyMzYwNjQwOTI0Ni5qcGd8Zjg4ZGYwOWM5NDNjOTk4YWRiNzFiY2RhY2MwOTdmODcyYzNjYjVhZjNmMjVjZWMxM2VkZWE5MmZlMTRmYWJjZHwxNTg2OTM2ODU2NTk3">
        </div>
        <div style="width:620px;float:left;text-align: center;margin-top: 20px">
          免费添加礼品袋和礼品卡
        </div>
        <div style="width:620px;float:left;text-align: center;margin-top: 20px">
          让您的礼物与众不同。
        </div>
      </div>
      <div style="width:300px;height: 500px;float:left;background-color: #f6f6f6">
        <div style="width: 250px;height: 25px;margin: auto;margin-top: 20px;font-size: 20px;">
          小计<strong><span style="float:right;">{{sumadd()}}&nbsp¥</span></strong>
        </div>
        <div style="width: 250px;height: 25px;margin: auto;margin-top: 25px;font-size: 16px">
          免费礼品袋<span style="float:right;">否</span>
        </div>
        <div style="width: 250px;height: 25px;margin: auto;font-size: 16px">
          免费贺卡<span style="float:right">否</span>
        </div>
        <div style="width: 250px;height: 25px;margin: auto;font-size: 16px">
          配送：<span style="float:right;">免费</span>
        </div>
        <span v-if="sumadd()>1000&&sumadd()<5000">
          <div style="width:250px;height:25px;margin: auto;font-size:16px">
            DISCOUNT<span style="float: right">-&nbsp{{(discountList[0].discount1).toFixed(2)}}&nbsp¥</span>
          </div>
        </span>
        <span v-else-if="sumadd()>5000&&sumadd()<10000">
          <div style="width:250px;height:25px;margin: auto;font-size:16px">
            DISCOUNT<span style="float: right">-&nbsp{{(discountList[0].discount2).toFixed(2)}}&nbsp¥</span>
          </div>
        </span>
        <span v-else-if="sumadd()>10000">
          <div style="width:250px;height:25px;margin: auto;font-size:16px">
            DISCOUNT<span style="float: right">-&nbsp{{(discountList[0].discount3).toFixed(2)}}&nbsp¥</span>
          </div>
        </span>
        <div style="width: 250px;margin-top: 40px;margin: auto">
          <hr/>
        </div>
        <div style="width: 250px;height: 25px;margin: auto;margin-top: 20px;font-size: 16px;">
          总计：<strong>
                  <span style="float:right;" v-if="sumadd()>1000&&sumadd()<5000">
                    {{sumadd()-discountList[0].discount1}}¥
                  </span>
                  <span style="float:right;" v-else-if="sumadd()>5000&&sumadd()<10000">
                    {{sumadd()-discountList[0].discount2}}¥
                  </span>
                  <span style="float:right;" v-else-if="sumadd()>10000">
                    {{sumadd()-discountList[0].discount3}}¥
                  </span>
                  <span style="float:right" v-else>
                    {{sumadd()}}¥
                  </span>
               </strong>
        </div>
        <div style="text-align: center;margin-top: 20px">
          <button type="button" @click="endPayment" style="cursor: pointer;width: 250px;height: 40px;background-color: #231161;color: white ">结账</button>
        </div>
        <div style="text-align: center;margin-top: 15px">
          <strong>尊享购物服务</strong>
        </div>
        <div style="text-align: center;margin-top: 12px">
          标准快递免运费
        </div>
        <div style="text-align: center;margin-top: 12px">
          指定配送日期
        </div>
        <div style="text-align: center;margin-top: 12px">
          免费礼品卡及礼品袋
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import {shopcarShowGoodsApi,shopcarDeteleGoodsApi,shopcarChangeGoodsApi,shopSettlementGoodsApi} from "@/api/lj_port/interface";
  export default {
  name: "Shopcar",
  data() {
    return {
      isAllCheck:false,
      num: 6,
      shopcarList:[],
      discountList:[
        {discount1:200.00,discount2:1000.00,discount3:3000.00}
      ],
      endPice:0
    };
  },

  methods: {
    sumadd(){
         let sum = 0;
        sum = this.endPice;
      return sum.toFixed(2);
    },
    selectedAll() {
      let endPice = 0;
      // 控制全选 全不选
      this.shopcarList.forEach(item => {
        !this.isAllCheck ? item.select = false : item.select = true
        if (this.isAllCheck){
          endPice =  parseInt(item.goods_pice)*item.select_number + endPice
        }
      })
      this.endPice = endPice;
    },
    itemCheck(item) {
      // 当子选项全选中时 全选按钮也要选中 反之则不选中
      let arrTrue = []  // 定义两个空数组 当子选项是选中的状态则放入arrTrue数组中反之放进arrFalse里
      let arrFalse = []
      let endPice = 0;
      this.shopcarList.forEach(item=> {
        if(item.select) {
          endPice =  parseInt(item.goods_pice)*item.select_number + endPice
          arrTrue.push(item.select)
        }else {
          arrFalse.push(item.select)
        }
      })
      // 当arrTrue长度等于购物车列表的数组的长度时，说明全部选中
      if(arrTrue.length == this.shopcarList.length) {
        this.isAllCheck = true
      }
      // 当arrFalse 长度大于0时 说明其中有 没有勾选的子选项
      if(arrFalse.length >0) {
        this.isAllCheck = false
      }
      this.endPice = endPice;
    },
    //查询
    queryList(){
      shopcarShowGoodsApi(sessionStorage.getItem('account')).then(req =>{
        console.log(req.data)
        this. shopcarList=req.data
      })
    },
    //删除
    deteleList(ids){
      let idArray = {
        "id":ids
      }
      this.$confirm('此操作将永久删除该商品, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        shopcarDeteleGoodsApi(idArray).then(() =>{
          this.queryList();
          this.$message({type: 'success', message: '删除成功!'});
        })
      })
    },
    //修改
    shopChange(car){
      let date = new Date();
      let time =date.getFullYear() + '年' + date.getMonth() + '月' + date.getDate() + '日'+date.getHours() +':' +date.getMinutes() ;
      let row = {
        "id":car.id,
        "account":car.account,
        "goods_id":car.goods_id,
        "goods_name":car.goods_name,
        "select_number":car.select_number,
        "goods_number":car.goods_number,
        "checked":0,
        "goods_pice":car.goods_pice,
        "create_time":car.create_time,
        "updata_time":time,
        "img_url":car.img_url
      }
      shopcarChangeGoodsApi(row).then(() =>{
        this.itemCheck(car);
      })
    },
  //  结算
    endPayment(){
      let buySucced = 0;
      let buyTime =  Date.parse(new Date());
      this.shopcarList.forEach(item=> {
        if(item.select) {
          console.log(item);
          let row = {
            "account":item.account,
            "goods_name":item.goods_name,
            "goods_pice":item.goods_pice,
            "buy_number":item.select_number,
            "buy_time":buyTime,
            "buy_address":item.updata_time
          }
          shopSettlementGoodsApi(row).then(() =>{
           let idArray = {"id":item.id}
            shopcarDeteleGoodsApi(idArray).then(() =>{
              this.queryList();
              buySucced = 1;
            })
          })
        }
        if (buySucced===1){
          this.$message({type: 'success', message: '购买成功!'});
        }
    })
    }
  },
    created() {
      this.queryList();
    },
}
</script>

<style lang="scss" scoped>
.shopcar{
  .shopall{
    width: 70%;
    margin:0 auto;
    div::-webkit-scrollbar {
      width: 4px;
      scrollbar-arrow-color:red;
    }
  }
  .el-input__inner{
    size:16px;
  }

}
</style>
